<template>
  <div class="header-container">
   <div class="left-title">知乎者也专栏</div>
   <div class="login-box" v-if="status">
      <a-button ghost class="login-btn">登录</a-button>
      <a-button ghost>注册</a-button>
   </div>
   <div class="login-box" v-else>
    <a-dropdown>
    <a class="ant-dropdown-link" @click.prevent>
      UserName
      <DownOutlined />
    </a>
    <template #overlay>
      <a-menu>
        <a-menu-item>
          <a href="javascript:;"><edit-outlined />修改密码</a>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:;"><logout-outlined />退出登录</a>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
   </div>
  </div>
</template>

<script setup>
import { defineComponent } from 'vue';
import { DownOutlined,LogoutOutlined,EditOutlined } from '@ant-design/icons-vue';
import { ref } from "vue"
let status = ref(true)
</script>

<style lang="scss" scoped>
.header-container{
  height: 100%;
  width: 100%;
  background-color:#3875C7 ;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  .left-title{
    color: #fff;
    font-size: 24px;
  }
  .login-box{
    .login-btn{
      margin-right: 20px;
    }
  }
}
</style>
